<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2> {{title}} </h2>
        <hr>
        <Head-one></Head-one>
        <Demo></Demo>
        <p>
            <input type="text" v-model="word">
        </p>
        <parent id='2110' msg="Are you OK?" :title="title" :word="word"></parent>

    </div>
    <template id="demo">
        <div>
            <h2>Demo - Demo - DEmo </h2>
        </div>
    </template>

    <template id="parent">
        <div>
            <h2>Parent - 父组件 </h2>
            <h5>props -- {{id}} -- {{msg}} - {{title}} --- {{word}}</h5>
            <hr>
            <child-one :prop-a="propA" :prop-b="propB" :propc="propC" :prop-d="propD"></child-one>
            <hr>
            <child-two :address="address" :offer="offer">

            </child-two>
        </div>
    </template>

    <template id="childone">
        <div>
            <h2>
                Childone - 1 - 子组件
            </h2>
            <h4>propA -- {{propA}}</h4>
            <h4>propB --- {{propB}}</h4>
            <h4>propc =- {{propc}}</h4>
            <h4>propD == {{propD}}</h4>
        </div>
    </template>

    <template id="childtwo">
        <div>
            <h2>
                childtwo - 2 - 子组件
            </h2>
            <h4>address === {{address}}</h4>
            <h2>我的 offer --- {{offer}}</h2>
        </div>
    </template>

</body>
<script>
    const head = {
        template: "<h2>Head - Head - WH2110-daydayup</h2>"
    }
    Vue.component("HeadOne", head)

    Vue.component("Demo", {
        template: "#demo"
    })

    Vue.component("parent", {
        template: "#parent",
        props: ['id', 'msg', 'title', 'word'],   //没有校验 Prop 的类型 
        data() {
            return {
                propA: "组件Prop 传递数据的",
                propB: "Vue is so easy",
                propC: "2110 - 越努力越幸运 ",
                propD: "每天都要把作业做完...2110",
                address: "湖北武汉金融港-B18",
                offer: "20K"
            }
        },
        components: {
            childTwo: {
                template: "#childtwo",
                props: {
                    address: [String, Boolean],
                    offer: {
                        type: String,
                        default: () => {
                            return "10000.00"
                        }
                    }
                }
            }
        }
    })

    Vue.component("childOne", {
        template: "#childone",
        props: {
            propA: String,    // 类型校验
            propB: String,
            propc: [String, Number],
            propD: {
                type: String,
                default: "这是默认的值"
            }
        }
    })

    // 根实例 根组件

    const vm = new Vue({
        // 局部注册组件
        components: {
            myBox: {
                template: "<h4>MyBox - MyBox - Mybox </h4>"
            }
        },
        data: {
            title: "Vue 组件 重要的属性  Prop  ",
            word: 'wh2110-daydayup'
        },
        mounted() {
            document.getElementsByTagName("title")[0].innerHTML = this.title;
        }
    }).$mount("#app")
</script>
<!-- 
    <A>
        <B></B>
    </A>
    props   组件接受的外部数据

    通过 prop 向子组件传递数据  单向数据流

    props 属性  用来传递（父组件传递给子组件） 组件的参数（动态&静态）v-bind
    props 只能用来传递数据  不可以修改
    动态props V-bind
    静态props 没有 v-bind

    props 驼峰命名  user-name="zhngsan"

    props 校验  格式类型
    String
    Number
    Boolean
    Array
    Object
    Date
    Fynction
    Symbol  符号


 -->



</html>